<template>
    <el-form ref="form" label-width="100px">
        <el-form-item label="事件名称">
            <el-input v-model="action.title" placeholder="请输入标题"></el-input>
        </el-form-item>
        <el-form-item label="事件标识">
            <el-input v-model="action.name" placeholder="请输入标题"></el-input>
        </el-form-item>
        <el-form-item label="事件类型">
            <el-radio-group v-model="action.type">
                <el-radio label="GET">获取(GET)</el-radio>
                <el-radio label="POST">提交(POST)</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="事件操作" v-if="action.type == 'POST'">
            <el-radio-group v-model="action.handle">
                <el-radio label="delete">删除(DELETE)</el-radio>
                <el-radio label="update">修改(UPDATE)</el-radio>
                <el-radio label="insert">添加(INSERT)</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="数据集">
            <el-select v-model="index" placeholder="请选择">
                <el-option :label="item.title" :value="index" v-for="(item,index) in present" :key="index"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="筛选集">
            <el-select v-model="action.where" placeholder="请选择" @change="handleWhere">
                <el-option :label="item.title" :value="item.name" v-for="(item,index) in present" :key="index"></el-option>
            </el-select>
        </el-form-item>
    </el-form>
</template>
<script type="text/javascript">
export default {
    props: {
        value: [Array, Object, Number, String]
    },
    data() {
        return {
            index: 0,
            action: {
                title: "",
                name: "",
                type: "GET",
                handle: "delete",
                model: "",
                fields: "",
                where: ""
            },
            dialogVisible: false,
        };
    },
    /**
     * 计算属性
     * @type {Object}
     */
    computed: {
        present: function(argument) {
            return this.value.present
        },
        target: function(argument) {
            return this.value.target
        }
    },
    /**
     * 数据监听
     * @type {Object}
     */
    watch: {
        index(value) {
            console.log("监听查询",this.present[value])
            this.action.fields = this.present[value].name;
            this.action.model = this.present[value].model;
        }
    },
    /**
     * 页面加载执行
     * @return {[type]} [description]
     */
    mounted() {

    },
    methods: {
        //检测数据
        checked() {
            let data = this.action;
            let tips = '';
            let ret = true;
            let reg = /^[a-zA-Z][A-Za-z0-9_]*$/;
            if (data.title == '') {
                tips = '请输入事件标题';
                ret = false;
            } else if (data.name == '') {
                tips = '请设置事件唯一标识';
                ret = false;
            } else if (data.name == 'index' || !reg.test(data.name)) {
                tips = '唯一标识符不符合规则';
                ret = false;
            } else if (data.type == '') {
                tips = '请设置事件交互方式';
                ret = false;
            } else if (data.type == 'POST' && !data.handle) {
                tips = '请设置事件类型';
                ret = false;
            } else if (data.fields == '') {
                tips = '请选择数据集';
                ret = false;
            } else if (data.where == '') {
                tips = "请选择筛选集";
                ret = false;
            } else if (reg.test(data.name)) {
                if (this.target) {
                    if (Array.isArray(this.target)) {
                        this.target.forEach(item => {
                            if (item.name == data.name) {
                                tips == '该事件标识符已存在！';
                                ret = false;
                            }
                        })
                    }
                }
            }

            if (!ret) {
                this.$message.warning(tips);
            }
            return !ret;

        },



        handleClose() {
            this.dialogVisible = false;
        },
        handleWhere(value) {
            if (this.action.fields == value) {
                this.$message({
                    showClose: true,
                    message: '筛选数据不能和绑定数据相同',
                    type: 'error'
                });
                this.action.where = "";
            }
        },
        /**
         * 确认创建
         */
        handleAffirm() {
            if (this.checked()) {
                return false;
            }
            this.target.push(this.action);
            this.dialogVisible = false;
        }
    }
}
</script>
<style type="text/css" lang="scss">
</style>